<template>
    <div class="voteDetail">
        <div class="voteDetailTitle">
            {{voteData.theme}}
        </div>
        <!--单选-->
        <div class="voteDetailWrap" v-if="voteData.type==1">
            <div class="voteDetailList" @click.stop="voteMethods(item,index)" v-for="(item,index) in voteData.vote_option">
                <p class="flex">
                    <span class="flex-1" :class="{'clickIndex':index==defaultIndex}"><span>{{item.option}}</span> </span>
                    <!--<span class="num" v-if="index==defaultIndex">+1 票</span>-->
                </p>
                <p class="progress">
                    <span class="progress-finished" v-if="index==defaultIndex" :style="{width:`${1/voteOption.length*100+'%'}`}"></span>
                </p>
            </div>
        </div>
        <!--多选-->
        <div class="voteDetailWrap" v-if="voteData.type==2">
            <div class="voteDetailList" @click.stop="voteMethods(item,index)" v-for="(item,index) in voteData.vote_option">
                <p class="flex">
                    <span class="flex-1" :class="{'clickIndex':1==item.status}"><span>{{item.option}}</span> </span>
                    <!--<span class="num " v-if="index==defaultIndex">+ 1票</span>-->
                </p>
                <p class="progress">
                    <span class="progress-finished" v-if="index==defaultIndex" :style="{width:`${1/voteOption.length*100+'%'}`}"></span>
                </p>
            </div>
        </div>
        <div class="voteBtn" @click.stop="submitVote">
                <span>投票</span>
        </div>
    </div>
</template>

<script>
    import Toast from 'muse-ui-toast';
export  default ({
    data(){
        return {
            vote:0,
            defaultIndex:-1,
            index:0,
            voteData:{},
            voteOption:[],
            mode:0,
            multiSelect:0
        }
    },
    methods:{
        voteMethods(item,index){
            if(this.voteData.type==2){
                console.log(this.voteData.vote_option)
                var oldData = this.voteData.vote_option[index];
                if(item.status==0){
                    //选中
                    oldData.status=1;
                    this.voteOption.push(oldData.id);
                    this.multiSelect++;
                    this.$set(this.voteData.vote_option,index,oldData)
                }else if(item.status==1){
                //未选中
                    oldData.status=0;
                    for(var k in this.voteOption){
                        if(this.voteOption[k]==item.id){
                            this.voteOption.splice(k,1)
                        }
                    }
                    this.multiSelect--;
                    this.$set(this.voteData.vote_option,index,oldData)
                }
            }else{
                this.defaultIndex =index;
                this.voteOption[0] =item.id;
            }

        },
        getData(id){
            this.$http.get('app/Vote/detail',{
                id:id,
                member_id:JSON.parse(Cookies.get('user_71ydj')).id
            }).then((res)=>{
                console.log(res)
                if(res.code==200){
                    this.voteData=res.data;

                    if(this.voteData.type==2){
                        for(var i  in this.voteData.vote_option){
                            this.voteData.vote_option[i].status=0;
                        }
                    }
                    console.log(this.voteData)
                }
            })
        },
        submitVote(){
               if(this.defaultIndex>=0||this.multiSelect>0){
                   this.$http.post('app/Vote/voting',{
                       id:this.$route.query.id,
                       option:this.voteOption,
                       member_id:JSON.parse(Cookies.get('user_71ydj')).id
                   }).then((res)=>{
                       if(res.code==200){
                           Toast.success('投票成功');
                           setTimeout(()=>{
                               this.$router.go(-1)
                           },1500)
                       }
                       console.log(res.data)
                   })
               }else{
                   Toast.error('请投下你的选票');
               }
        }
    },
    mounted(){
        this.$progress.done();
        // console.log(JSON.parse(Cookies.get('user_71ydj')).id);
        this.getData(this.$route.query.id);
        this.mode =this.$route.query.mode;
    }

})
</script>
<style lang="scss" scoped>
   .voteDetail{
       height: 100vh;
       background: #f3f4fa;
       .voteDetailTitle{
            background: white;
           padding: 18px 0;
           padding-left: 18px;
           box-sizing: border-box;
           -webkit-box-sizing: border-box;
           font-size:18px;
           font-family:PingFang SC;
           font-weight:bold;
           color:rgba(51,51,51,1);
           margin-bottom: 28px;
       }
       .voteDetailWrap{
           padding: 0 16px;
           width: 100%;
           .voteDetailList{
               display: inline-block;
               width: 100%;
               padding: 0px 12px;
               box-sizing: border-box;
               -webkit-box-sizing: border-box;
               background:rgba(255,255,255,1);
               box-shadow:0px 6px 32px 0px rgba(230,230,230,0.2);
               border-radius:4px;
               margin-bottom: 16px;
               font-size:16px;
               font-family:PingFang SC;
               font-weight:500;
               color:rgba(51,51,51,1);
               p{
                   span.flex-1{
                       position: relative;
                       overflow: hidden;
                        &.clickIndex{
                            span{
                                position: relative;
                                &:after{
                                    position: absolute;
                                    content: '';
                                    right: -16px;
                                    top: 50%;
                                    width: 6px;
                                    height:10px;
                                    border-style: solid;
                                    border-color: #F35A4C;
                                    border-width: 0 2px 2px 0;
                                    -webkit-transform: rotateZ(45deg);
                                    transform: rotateZ(45deg);
                                    margin-top: -5px;
                                }
                            }

                        }
                   }
                   span.num{
                       font-size: 14px;
                       width: 70px;
                       text-align: center;
                       margin-top: 5px;
                   }
                   &.flex{
                       padding-top: 16px;
                       margin-bottom: 18px;
                   }

               }
               .progress{
                   position: relative;
                   width: 100%;
                   height:3px;
                   background:#f3f4fa;
                   border-radius:6px;
                   margin-bottom: 15px;
                   .progress-finished{
                       vertical-align: top;
                       display: inline-block;
                       height: 100%;
                       background:rgba(236,83,69,1);
                       width: 60%;
                   }
               }

           }
       }
       .voteBtn{
           display:block;
           margin: 0 auto;
           background:rgba(236,83,69,1);
           width: 60px;
           padding: 6px 0;
           text-align: center;
           font-size: 14px;
           color: white;
           border-radius: 6px;
       }

   }
   .flex{
       display: -webkit-box;
       display: -webkit-flex;
       display: flex;
   }
   .align-center{
       -webkit-box-align: center;
       -webkit-align-items: center;
       align-items: center;
   }
   .flex-1{
       -webkit-box-flex: 1;
       -webkit-flex: 1;
       flex: 1;
       min-width: 0;
       height: 100%;
   }
</style>

